<template>
  <div id="youngcadresedit">
    <div v-if="pageLoading">数据加载中...</div>
    <div v-else>
      <el-switch v-show="!pageLoading"
        v-model="logtype"
        active-text="变更后数据"
        inactive-text="变更前数据"
        @change="changeLogType">
      </el-switch>
      <table cellspacing="0" cellpadding="0" class="mytable" style="margin-top:10px;" v-if="original&&original!=={}">
        <tr>
          <th>单位名称</th>
          <td colspan="8">
            <template>{{id2name(original.ssdw,dwoptions)}}</template>
          </td>
        </tr>
        <tr>
          <th>姓名</th>
          <td style="width:220px">
            <template>{{original.xm}}</template>
          </td>
          <th>身份证号</th>
          <td style="width:260px">
            <template>{{original.sfzh}}</template>
          </td>
          <th>性别</th>
          <td style="width:260px">
            <template>{{id2name(original.xb,xboptions)}}</template>
          </td>
          <th>出生年月</th>
          <td style="width:260px">
            <template>{{formatDate(original.csrq)}}</template>
          </td>
            <td style="width:240px" rowspan="4" align="center">
              <img v-if='original.tx' :src="this.$http.defaults.baseURL+$http.defaults.youngAPI+'api/gen/file/download?id='+parseInt(original.tx)" width="120" height="150">
              <div v-else class="youngnopic"></div>
            </td>
        </tr>
        <tr>
          <th>民族</th>
          <td>
            <template>{{id2name(original.mz,mzoptions)}}</template>
          </td>
          <th>政治面貌</th>
          <td>
            <template>{{id2name(original.zzmm,zzmmoptions)}}</template>
          </td>
          <th>参加工作时间</th>
          <td>
            <template>{{formatDate(original.cjgzsj)}}</template>
          </td>
          <th>专业技术职务</th>
          <td>
            <template>{{original.zyjszw}}</template>
          </td>
        </tr>
        <tr>
          <th>职务</th>
          <td>
            <template>{{original.zw}}</template>
          </td>
          <th>任现职务时间</th>
          <td>
            <template>{{formatDate(original.rxzwsj)}}</template>
          </td>
          <th rowspan="2" style="vertical-align: top;">任相当层次职务职级时间</th>
          <td colspan="3" rowspan="2">
            <template>{{formatDate(original.rxdcczwzjsj)}}</template>
          </td>
        </tr>
        <tr>
          <th>职级</th>
          <td>
            <template>{{original.zj}}</template>
          </td>
          <th>任现职级时间</th>
          <td>
            <template>{{formatDate(original.rxzjsj)}}</template>
          </td>
        </tr>
        <tr>
          <th>近三年考核情况</th>
          <td colspan="8">
            <div v-html="original.jsnkhqk?original.jsnkhqk.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>教育背景</th>
          <td colspan="8">
            <div v-html="original.jybj?original.jybj.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>工作简历</th>
          <td colspan="8">
            <div v-html="original.gzjl?original.gzjl.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>分管或从事工作</th>
          <td colspan="8">
            <div v-html="original.fghcsgz?original.fghcsgz.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>政治素质及政治表现</th>
          <td colspan="8">
            <div v-html="original.zzszjzzbx?original.zzszjzzbx.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>能力特点、工作实绩和主要事例</th>
          <td colspan="8">
            <div v-html="original.nltd?original.nltd.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>主要不足</th>
          <td colspan="8">
            <div v-html="original.zybz?original.zybz.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>“四必”及巡视、信访、审计等情况</th>
          <td colspan="8">
            <div v-html="original.sbjxsxfsjdqk?original.sbjxsxfsjdqk.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>本人面谈情况</th>
          <td colspan="8">
            <div v-html="original.brmtqk?original.brmtqk.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>培养方向和培养措施</th>
          <td colspan="8">
            <div v-html="original.pyfxhpycs?original.pyfxhpycs.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>备注</th>
          <td colspan="8">
            <div v-html="original.bz?original.bz.replace(/\n/g,'<br>'):''"></div>
          </td>
        </tr>
        <tr>
          <th>附件</th>
          <td colspan="8">
            <div>
              <div v-for="(item,index) in original.files" :key="index">
                <el-link
                  :href="$http.defaults.baseURL+$http.defaults.youngAPI+'api/gen/file/download?isDeleted=true&id='+item.id"
                  icon="el-icon-paperclip"
                  v-if="item.dataDeleted"
                >{{ item.name }}</el-link>
                <el-link
                  :href="$http.defaults.baseURL+$http.defaults.youngAPI+'api/gen/file/download?id='+item.id"
                  icon="el-icon-paperclip"
                  v-else
                >{{ item.name }}</el-link>
              </div>
            </div>
          </td>
        </tr>
        <tr class="passed">
          <th>状态</th>
          <td>
            <template>{{original.zt===0?'正常':''}}{{original.zt===1?'已出库':''}}</template>
          </td>
          <th>职务职级层次</th>
          <td>
            <template>{{id2name(original.shfl,shfloptions)}}</template>
          </td>
          <th>来源类型</th>
          <td>
            <template>{{id2name(original.lyfl,lyfloptions)}}</template>
          </td>
          <th>培养使用建议类型</th>
          <td colspan="2">
            <template>{{id2name(original.pysyjylx,pysyjylxoptions)}}</template>
          </td>
        </tr>
        <tr  class="passed">
          <th>入库依据</th>
          <td colspan="8">
            <div v-html="original.rkyj&&original.rkyj.replace(/\n/g,'<br>')"></div>
          </td>
        </tr>
      </table>
      <div style="margin:0 10px">
        <el-button @click.native="backToList">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    timestamp: {
      handler (val) {
        if (this.personId && this.personId !== '') {
          this.getLogDetail(this.personId)
        }
        this.init()
      },
      immediate: true
    }
  },
  props: {
    personId: '',
    timestamp: ''
  },
  data () {
    return {
      beforeContent: {},
      afterContent: {},
      original: {
        id: '',
        xm: '',
        sfzh: '',
        xb: '',
        csrq: '',
        mz: '',
        zzmm: '',
        cjgzsj: '',
        zyjszw: '',
        zw: '',
        rxzwsj: '',
        rxdcczwzjsj: '',
        zj: '',
        rxzjsj: '',
        jsnkhqk: '',
        jybj: '',
        gzjl: '',
        fghcsgz: '',
        zzszjzzbx: '',
        nltd: '',
        zybz: '',
        sbjxsxfsjdqk: '',
        brmtqk: '',
        pyfxhpycs: '',
        bz: '',
        zzbxjjtsl: '',
        zmyhzbmydgzjjtsl: '',
        zytdjjtsl: '',
        zybzjjtsl: '',
        ssdw: '',
        shfl: '',
        lyfl: '',
        pysyjylx: '',
        passed: null,
        files: []
      },
      logtype: false,
      pageLoading: true,
      zzmmoptions: [],
      xboptions: [],
      mzoptions: [],
      dwoptions: [],
      shfloptions: [],
      lyfloptions: [],
      pysyjylxoptions: [],
      userRoles: ''
    }
  },
  methods: {
    changeLogType (val) {
      this.original = val ? this.afterContent : this.beforeContent
    },
    formatDate (str) {
      if (str) {
        return str.slice(0, 4) + '.' + str.slice(4, 6)
      }
    },
    id2name (id, arr) {
      if (id) {
        let myobj = arr.filter(item => parseInt(item.value) === parseInt(id))
        if (myobj && myobj.length > 0) {
          return myobj[0].label
        }
      }
    },
    inRoles (str) {
      let arr = this.userRoles
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    init () {
      this.pageLoading = true
      this.afterContent = {}
      this.beforeContent = {}
      this.logtype = false
      this.getDics()
    },
    getDics () {
      this.$http
        .get(this.$http.defaults.youngAPI + `api/young/jiben/getGenderDictList`)
        .then(response => {
          if (response.data.success) {
            this.xboptions = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.youngAPI + `api/young/jiben/getNationDictList`)
        .then(response => {
          if (response.data.success) {
            this.mzoptions = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.youngAPI + `api/young/jiben/getPoliticalDictList`)
        .then(response => {
          if (response.data.success) {
            this.zzmmoptions = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
      let deptCode = ''
      switch (localStorage.getItem('unitName')) {
        case '干部一处':
          deptCode = 1
          break
        case '干部二处':
          deptCode = 2
          break
        case '干部三处':
          deptCode = 3
          break
      }
      this.$http
        .post(this.$http.defaults.youngAPI + `api/busUnit/queryList`, {deptCode: deptCode})
        .then(response => {
          if (response.data.success) {
            this.dwoptions = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.youngAPI + `api/sysDict/getByCode?code=03`)
        .then(response => {
          if (response.data.success) {
            this.shfloptions = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.youngAPI + `api/sysDict/getByCode?code=01`)
        .then(response => {
          if (response.data.success) {
            this.lyfloptions = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.youngAPI + `api/sysDict/getByCode?code=02`)
        .then(response => {
          if (response.data.success) {
            this.pysyjylxoptions = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getLogDetail (id) {
      let url = 'api/sysLog/getById'
      this.pageLoading = true
      this.$http
        .get(this.$http.defaults.youngAPI + url + `?id=` + id)
        .then(response => {
          this.pageLoading = false
          if (response.data.success) {
            if (response.data.result.afterContent) {
              this.afterContent = JSON.parse(response.data.result.afterContent)
            } else {
              this.afterContent = {}
            }
            if (response.data.result.beforeContent) {
              this.beforeContent = JSON.parse(response.data.result.beforeContent)
            } else {
              this.beforeContent = {}
            }
            this.changeLogType(false)
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.pageLoading = false
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    backToList () {
      this.$emit('dialogHide', false)
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style>
  #youngcadresedit h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0 0 20px;
  }
  #youngcadresedit .el-table{
    border: #95B8E7 solid 1px;
  }
  #youngcadresedit .mytable{
    border-top: 1px solid #74A6CC;
    border-left: 1px solid #74A6CC;
    margin: 10px;
    width: calc(100% - 20px);
    font-size:var(--size14) !important;
    font-family: '宋体'
  }
  #youngcadresedit .mytable th,
  #youngcadresedit .mytable td{
    padding: 10px;
    border-right: 1px solid #74A6CC;
    border-bottom: 1px solid #74A6CC;
    vertical-align:top;
    line-height: 150%;
    height: 22px;
  }
  #youngcadresedit .mytable th{
    background:#C0DCF1;
    width:120px;
    vertical-align: middle;
  }
  #youngcadresedit .mytable .passed th{
    background:#F7E4BB;
  }
  #youngcadresedit .mytable .passed td{
    background:#FBF0DB;
  }
</style>
<style scoped>
.details{
  font-weight:bolder;
  border-bottom:1px solid #95B8E7;
  padding:0 10px;
  min-height: 36px;
}
</style>
